//  这是一个输入框得组件
<template>
  <div class="input-model">
    <van-cell-group>
      <van-field class="soltBtn"
                 v-if="type === 'soltBtn'"
                 v-model="prviteValue"
                 center
                 :label="name"
                 style="padding-right:0px;"
                 :placeholder="`请输入${this.name}`">
        <template #button>
          <van-button type="primary">{{btnText}}</van-button>
        </template>
      </van-field>
      <van-field v-else
                 v-model="prviteValue"
                 :type="type"
                 :label="name"
                 :placeholder="`请输入${this.name}`" />

    </van-cell-group>
  </div>
</template>
<script>
import Vue from 'vue';
import { Field, Button, CellGroup } from 'vant';

Vue.use(Field);
Vue.use(Button);
Vue.use(CellGroup);
export default {
  name: 'inputModel',
  props: {
    name: { type: String, default: () => '' },
    type: { type: String, default: () => '' },
    value: { type: String, default: () => '' },
    btnText: { type: String, default: () => '' }
  },
  data() {
    return {
      prviteValue: ""
    }
  },
  created() {
    this.prviteValue = this.value
  },
  methods: {

  },
  watch: {
    'prviteValue'(val) {
      this.$emit('changeVal', val)
    }
  }
}
</script>

<style lang="less" >
.input-model {
  .van-cell-group {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    .van-cell {
      position: relative;
      height: 45px;
      background-color: #f6f6f6;
      .van-field__label {
        color: #333333;
        font-size: 0.9375rem;
      }
      .van-field__control {
        font-size: 0.9375rem;
      }
    }
    // .soltBtn {
    //   width: 80%;
    // }
  }
  .van-button--primary {
    border: none;
    background-color: #e62b4b;
    border-left: 10px solid #fff;
  }
  .van-cell::after {
    border: none;
  }
  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0px;
  }
}
</style>
